import React, { useEffect, useRef, useState } from 'react'
import { Form, Row, Col, Input, Space, Button, Select } from 'antd'
import style from './Index.module.less'
import zoneList from '@js/telZone'
import { getProvinceCityTree } from '@js/area'
import { clanList, politicalList } from '@js/config'
import Dictionary from '@src/assets/js/dictionary'

const areaTree = getProvinceCityTree()
const { Item } = Form
const { Option } = Select
const layout = {
  labelCol: { flex: '140px' }
}

const countries = zoneList.filter(li => {
  return li.name.indexOf('中国') === -1 || li.name === '中国'
})

function formatCondition (form) {
  const condition = []
  if (form.name !== undefined && form.name !== '') {
    condition.push({ k: 'name', o: 'like', v: `%${form.name}%` })
  }
  if (form.country) {
    condition.push({ k: 'country', o: '=', v: form.country })
  }
  if (form.province) {
    condition.push({ k: 'province', o: '=', v: form.province })
  }
  if (form.city) {
    condition.push({ k: 'city', o: '=', v: form.city })
  }
  if (form.nation) {
    condition.push({ k: 'nation', o: '=', v: form.nation })
  }
  if (form.political) {
    condition.push({ k: 'political', o: '=', v: form.political })
  }
  if (form.occupation) {
    condition.push({ k: 'occupation', o: '=', v: form.occupation })
  }
  if (form.gender) {
    condition.push({ k: 'gender', o: '=', v: form.gender })
  }
  if (form.foreign_case_in !== undefined) {
    condition.push({ k: 'foreign_case_in', o: '=', v: form.foreign_case_in })
  }
  if (form.structure) {
    condition.push({ k: 'structure', o: 'like', v: `%${form.structure}%` })
  }
  if (form.educational) {
    condition.push({ k: 'educational', o: '=', v: form.educational })
  }
  return condition
}

function Main ({ meta, onChange = () => {} }) {
  const formRef = useRef(null)
  const [works, setWorks] = useState([])
  useEffect(() => {
    const d = new Dictionary()
    d.init('仲裁员职业分类')
      .then(() => {
        setWorks(d.getList('仲裁员职业分类').map(li => ({ label: li.title, value: li.value })))
      })
  }, [])
  useEffect(() => {
    if (meta && meta.formData && formRef.current) {
      formRef.current.setFieldsValue(meta.formData)
      formRef.current.submit()
    }
  }, [meta, formRef])
  return (
    <div>
      <Form name='arbitrator-manage-search' ref={formRef} {...layout} onFinish={d => onChange(formatCondition(d))} onReset={() => formRef.current.submit()}>
        <Row gutter={24}>
          <Col span={8}>
            <Item label='姓名' name='name'>
              <Input placeholder='请输入' />
            </Item>
          </Col>
          <Col span={8}>
            <Item label='国家地区' name='country'>
              <Select placeholder='请选择' showSearch allowClear onChange={e => { formRef.current.setFieldsValue({ clan: undefined }) }}>
                {countries.map((li, i) => {
                  return (
                    <Option key={i} value={li.name}>{li.name}</Option>
                  )
                })}
              </Select>
            </Item>
          </Col>
          <Col span={8}>
            <Item label='省份' name='province'>
              <Select placeholder='请选择' showSearch allowClear onChange={e => { formRef.current.setFieldsValue({ city: undefined }) }}>
                {areaTree.map((li, i) => {
                  return (
                    <Option key={i} value={li.label}>{li.label}</Option>
                  )
                })}
              </Select>
            </Item>
          </Col>
          <Col span={8}>
            <Item noStyle shouldUpdate={(p, c) => p.province !== c.province}>
              {
                ({ getFieldValue }) => {
                  const c = getFieldValue('province')
                  let options = []
                  if (c) {
                    const o = areaTree.find(li => li.label === c)
                    if (o) {
                      options = o.children
                    }
                  }
                  return (
                    <Item label='城市' name='city'>
                      <Select placeholder='请选择' showSearch allowClear>
                        {options.map((li, i) => {
                          return (
                            <Option key={i} value={li.label}>{li.label}</Option>
                          )
                        })}
                      </Select>
                    </Item>
                  )
                }
              }
            </Item>
          </Col>
          <Col span={8}>
            <Item label='民族' name='nation'>
              <Select placeholder='请选择' showSearch allowClear>
                {clanList.map((li, i) => {
                  return (
                    <Option key={i} value={li}>{li}</Option>
                  )
                })}
              </Select>
            </Item>
          </Col>
          <Col span={8}>
            <Item label='政治面貌' name='political'>
              <Select placeholder='请选择' allowClear showSearch>
                {politicalList.map((li, i) => {
                  return (
                    <Option key={i} value={li}>{li}</Option>
                  )
                })}
              </Select>
            </Item>
          </Col>
          <Col span={8}>
            <Item name='structure' label='所在单位'>
              <Input placeholder='请输入' allowClear />
            </Item>
          </Col>
          <Col span={8}>
            <Item label='职业分类' name='occupation'>
              <Select options={works} allowClear placeholder='请选择' showSearch />
            </Item>
          </Col>
          <Col span={8}>
            <Item label='性别' name='gender'>
              <Select placeholder='请选择' allowClear>
                <Option value='男'>男</Option>
                <Option value='女'>女</Option>
              </Select>
            </Item>
          </Col>
          <Col span={8}>
            <Item label='是否擅长涉外案件' name='foreign_case_in'>
              <Select placeholder='请选择' allowClear>
                <Option value={1}>是</Option>
                <Option value={0}>否</Option>
              </Select>
            </Item>
          </Col>
          <Col span={8}>
            <Item label='学历' name='educational'>
              <Select placeholder='请选择'>
                <Option value='专科'>专科</Option>
                <Option value='本科'>本科</Option>
                <Option value='硕士研究生'>硕士研究生</Option>
                <Option value='博士研究生'>博士研究生</Option>
              </Select>
            </Item>
          </Col>
          <Col span={8}>
            <Item className={style['right-line']}>
              <Space size='middle'>
                <Button type='primary' ghost htmlType='submit'>搜索</Button>
                <Button htmlType='reset'>重置</Button>
              </Space>
            </Item>
          </Col>
        </Row>
      </Form>
    </div>
  )
}

export default Main
